.button {
  color: var(--color-text);
  text-decoration: var(--color-text);
  margin: 4px 0 4px 2px;
  padding: 3px 6px;
  align-items: center;
  display: flex;
  cursor: pointer;
  background-color: var(--color-button-background);
	background-repeat: no-repeat;
	background-position: 4px 50%;
  border-radius: 2px;
}
.button:hover {
  background-color: var(--color-button-hover);
}
.button.active {
  color: var(--color-text-active);
  background-color: var(--color-button-active);
}
.button.inactive {
	color: var(--color-button-background);
  background-color: var(--color-button-disabled);
  pointer-events: none;
}
.button.with-icon {
  padding: 3px 6px 3px 15px;
}

#button-clear {
  background-image: var(--button-clear-default);
}
#button-pause {
  background-image: var(--button-pause-default);
}
#button-pause.button.active {
  background-image: var(--button-pause-active);
}
#button-autoscroll {
  background-image: var(--button-autoscroll-default);
}
#button-autoscroll.button.active {
  background-image: var(--button-autoscroll-active);
}
#button-hide-resources {
  background-image: var(--button-filter-default);
}
#button-hide-resources.button.active {
  background-image: var(--button-filter-active);
}
#button-show-protocol-only {
  background-image: var(--button-filter-default);
}
#button-show-protocol-only.button.active {
  background-image: var(--button-filter-active);
}
#button-colorize {
  background-image: var(--button-colorize-default);
}
#button-colorize.button.active {
  background-image: var(--button-colorize-active);
}
#button-export-list {
  background-image: var(--button-export-default);
}
#button-import-list {
  background-image: var(--button-import-default);
}
